<template>
  <div class="card">
    <h2 class="flex justify-between">
      <span class="text-lg font-bold">社会消费品零售总额</span>
      <span>兵团排名 <span class="text-lg font-bold">NO.4</span></span>
    </h2>
    <div class="grid grid-cols-2 gap-4">
      <div class="bg-blue-50 p-4 rounded-lg">
        <p class="text-3xl font-bold text-blue-800">
          {{ resList[props.yearStr].value }}<span class="unit">亿元</span>
        </p>
        <p class="text-sm text-gray-600">社会消费品零售总额</p>
      </div>
      <div class="bg-green-50 p-4 rounded-lg">
        <p class="text-3xl font-bold text-green-800">
          {{ resList[props.yearStr].growthRate }}<span class="unit">%</span>
        </p>
        <p class="text-sm text-gray-600">增速</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps } from 'vue'
const props = defineProps({
  yearStr: String,
})
let resList = ref({
  2024: {
    value: '2000.55',
    growthRate: '2.20',
  },
  2023: {
    value: '1999.00',
    growthRate: '2.26',
  },
  2022: {
    value: '2025.00',
    growthRate: '1.60',
  },
  2021: {
    value: '2556.23',
    growthRate: '1.26',
  },
  2020: {
    value: '3000.55',
    growthRate: '2.10',
  },
})
</script>

<style scoped>
/* 组件样式 */
</style>
